<template>
  <div>
    <el-container>
      <el-main>
        <div class="title-font">计费管理 / 缴费类性管理</div>
        <el-row>
          <el-col :span="4">
            <el-input
              v-model="sendInfo.paymoney"
              placeholder="项目价格"
              size="small"
              type="text"
              autocomplete="off"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="sendInfo.paystatus"
              placeholder="通知状态"
              size="small"
              type="text"
              autocomplete="off"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="16" class="transe">
            <span class="list-title">电费目录</span>
            <div style="float:right">
              <el-button type="primary" @click="getTableData" size="small" icon="el-icon-search">查询</el-button>
              <el-button type="success" @click="xinzeng" size="small" icon="el-icon-plus">新增</el-button>
              <el-button
                type="primary"
                @click="getTableDatashuaxing"
                size="small"
                icon="el-icon-refresh"
              >刷新</el-button>
              <el-button type="primary" size="small" icon="el-icon-download">导出</el-button>
            </div>

            <!-- <el-button
              size="small"
              :data="tableData"
              type="primary"
              @click="exportExcel"
              icon="el-icon-download"
            >导出</el-button>-->
          </el-col>
        </el-row>
        <el-row style="margin-top:2%">
          <el-col :span="12" style="padding-left: 5px;padding-right: 5px; width:35%">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </el-col>
          <el-col :span="12" style="padding-left: 5px;padding-right: 5px; width:65%">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="payname" label="缴费项目名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.payname }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="paylevel" label="缴费项目优先级">
                <template slot-scope="scope">
                  <span>{{ scope.row.paylevel }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="paynum" label="项目用量/时长">
                <template slot-scope="scope">
                  <span>{{ scope.row.paynum }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="paymoney" sortable label="项目价格">
                <template slot-scope="scope">
                  <span>{{ scope.row.paymoney }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="paytime" sortable label="创建时间">
                <template slot-scope="scope">
                  <span>{{ scope.row.paytime }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="username" label="通知人">
                <template slot-scope="scope">
                  <span v-if="scope.row.username != null ">{{ scope.row.username }}</span>
                  <span v-else>暂无</span>
                </template>
              </el-table-column>
              <el-table-column prop="paystatus" label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.paystatus == 1">已通知</span>
                  <span v-if="scope.row.paystatus == 2">未通知</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="250">
                <template slot-scope="scope">
                  <el-button size="mini" @click="dialogTableVisible = true" plain>通知</el-button>
                  <el-button size="mini" @click="check(scope.row)" plain>查看</el-button>
                  <el-button size="mini" @click="zuofei(scope.row)" plain type="danger">作废</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

        <!-- 分页器 -->
        <!-- <Pagination
          :page="sendInfo.page"
          :componentTotal="componentTotal"
          @changeRows="setRows"
          @changePage="setPage"
        ></Pagination>-->
      </el-main>
    </el-container>

    <el-dialog title="计费通知" :visible.sync="dialogTableVisible">
      <div class="top" style="display: flex; margin-bottom: 5px">
        <el-input
          v-model="sendInfo1.username"
          size="small"
          style="width: 50%"
          placeholder="请输入用户账号"
        ></el-input>
        <el-button
          type="primary"
          size="small"
          style="margin-left: 15px;width: 6%"
          icon="el-icon-search"
          @click="getGridData"
        ></el-button>
        <el-button
          type="success"
          size="small"
          style="margin-left:12px;width:9%;background:rgb(247, 186, 42);border-color:rgb(247, 186, 42)"
          icon="el-icon-refresh-right"
          @click="chongzhi1"
        >重置</el-button>
      </div>
      <el-table border :data="gridData">
        <el-table-column property="id" label="序号"></el-table-column>
        <el-table-column property="username" label="用户账号"></el-table-column>
        <el-table-column property="homeaddress" label="家庭住址"></el-table-column>
        <el-table-column property="type" label="类型"></el-table-column>
        <el-table-column prop="coststatus" label="缴费状态">
          <template slot-scope="scope">
            <span v-if="scope.row.coststatus == 1">已缴费</span>
            <span v-if="scope.row.coststatus == 2">未缴费</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import * as XLSX from "xlsx";
// import { xlsx, readFile } from "@/assets/js/xlsx";
import Cookies from "js-cookie";
import Pagination from "@/components/Pagination";
export default {
  data() {
    return {
      tableData: [],
      gridData: [],
      plain: true,
      options: [
        { label: "已通知", value: 1 },
        { label: "未通知", value: 2 }
      ],
      value: "",
      data: [
        {
          id: 1,
          label: "缴费项目",
          children: [
            {
              id: 2,
              label: "电费项目",
              children: [
                {
                  id: 7,
                  label: "电费目录表"
                }
              ]
            },
            {
              id: 3,
              label: "水费项目",
              children: [
                {
                  id: 8,
                  label: "水费固定月目录表"
                },
                {
                  id: 9,
                  label: "水费按量计价目录表"
                }
              ]
            },
            {
              id: 4,
              label: "天然气项目",
              children: [
                {
                  id: 10,
                  label: "天然气目录表"
                }
              ]
            },
            {
              id: 5,
              label: "物业费项目",
              children: [
                {
                  id: 11,
                  label: "物业费目录表"
                }
              ]
            },
            {
              id: 6,
              label: "宽带费项目",
              children: [
                {
                  id: 12,
                  label: "宽带费目录表"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // componentTotal: 0,
      sendInfo: {
        c_id: 7,
        paymoney: "",
        paystatus: "",
        currPage: 0,
        pageNum: 10
      },
      sendInfo1: {
        username: "",
        currPage: 0,
        pageNum: 7
      },
      paystatus: "",
      coststatus: "",
      dialogTableVisible: false,
      c_ids: 0
    };
  },
  methods: {
    getTableDatashuaxing() {
      if (this.c_ids == 0) {
        this.tableData = [];
        setTimeout(() => {
          this.getTableData();
        }, 300);
      } else {
        this.tableData = [];
        setTimeout(() => {
          this.getTableData2(this.c_ids);
        }, 300);
      }
    },
    async getTableData() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/cost/getCostData",
        {
          headers: {
            "X-Litemall-Admin-Token": "d3ead033-d02f-4fb2-bd37-c7f5f9bb5044"
          },
          params: this.sendInfo
        }
      );
      console.log(res);
      this.tableData = res.data;
      // this.componentTotal = res.total;
    },
    async getTableData2(ids) {
      const { data: res } = await this.axios.get(
        `http://community.byesame.com/cost/getCostData?c_id=${ids}`,
        {
          headers: {
            "X-Litemall-Admin-Token": "d3ead033-d02f-4fb2-bd37-c7f5f9bb5044"
          },
          params: this.sendInfo
        }
      );
      console.log(res);
      this.tableData = res.data;
      // this.componentTotal = res.total;
    },
    // 通知模态框
    async getGridData() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/users/getUserList",
        {
          headers: {
            "X-Litemall-Admin-Token": "d3ead033-d02f-4fb2-bd37-c7f5f9bb5044"
          },
          params: this.sendInfo1
        }
      );
      console.log(res);
      this.gridData = res.data;
      // this.componentTotal = res.total;
    },
    // // 导出Excel
    // exportExcel() {
    //   xlsx(this.tableData, this.listHander, "用户信息表");
    // }
    handleNodeClick(value) {
      this.c_ids = value.id;
      this.getTableData2(value.id);
    },
    // 分页器
    setRows(n) {
      this.sendInfo.pageNum = n;
      this.getTableData();
    },
    setPage(n) {
      this.sendInfo.currPage = n;
      this.getTableData();
    },
    tongzhi() {
      this.dialogTableVisible = true;
    },
    // 点击模态框重置
    chongzhi1() {
      this.sendInfo1.username = "";
      this.getGridData();
    },
    // 点击查看
    check(row) {
      this.$router.push({
        path: "/charging/typeAdd",
        query: { detailId: row.id }
      });
    },
    // 点击新增跳转路由
    xinzeng() {
      this.$router.push({
        path: "/charging/payAdd"
      });
    },
    // 作废
    zuofei(row) {
      this.$confirm("是否永久删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.removeUser(row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 作废接口
    async removeUser(row) {
      const { data: res } = await this.axios.get(
        `http://community.byesame.com/cost/delCostData?id=${row.id}&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjEyLCJ1c2VybmFtZSI6ImFkbWluIiwiZW1haWwiOiJ3ZSIsImhlYWQiOiIyMDI0MDMwODE5Mzc1Nzg3MTE4OTAuanBnIiwidHlwZSI6IjEiLCJpYXQiOjE3MTE0OTk5NzEsImV4cCI6MTcxMTU4NjM3MX0.r87Oc_3733o5u3k5U9DVYuV9jRzafBscx1cTjLTvDOI`
      );
      this.$message.success("删除成功");
      this.getTableData();
    }
  },
  mounted() {
    this.Token = Cookies.get("X-Litemall-Admin-Token");
    this.getTableData();
    this.getGridData();
  },
  components: {
    Pagination
  }
};
</script>

<style lang="scss" scoped>
.el-container {
  background-color: rgb(240, 240, 240);
}
.el-main {
  margin: 1.3% 1%;
  padding: 0;
  background-color: #fff;
}
::v-deep .el-col {
  padding-left: 5px;
  padding-right: 5px;
}
::v-deep .el-row {
  margin-left: 10px;
  margin-right: 10px;
}
::v-deep .el-main .title-font {
  font-size: 16px;
  font-weight: 600;
  padding: 1em;
}
.list-title {
  margin-left: 30px;
  font-weight: bold;
  font-size: 1.5em;
}
</style>